import { FC, lazy, useState } from "react";
import { Empty } from "antd";
import "./index.scss";
import NewFrend from "./ContactList/NewFrend";
import MyGroup from "./ContactList/MyGroup";
import Blacklist from "./ContactList/Blacklist";
import MyFrend from "./ContactList/MyFrend";
import Search from "@renderer/components/Search";

type PropType = {
  onDoubleSelect: any;
};

const ContactList = lazy(() => import("./ContactList"));
const SearchList = lazy(() => import("./searchList"));

const contacts: FC<PropType> = (props): JSX.Element => {
  const { onDoubleSelect } = props;
  const [activeId, setActiveId] = useState("");
  const [keyword, setKeyword] = useState("");
  const handleChange = (event) => {
    setKeyword(event.target.value);
  };
  const onSelect = (id) => {
    setActiveId(id);
  };
  const ListComponents = () => {
    if (keyword) {
      return <SearchList keyword={keyword}></SearchList>;
    } else {
      return (
        <ContactList
          id={activeId}
          onSelect={onSelect}
          onDoubleSelect={onDoubleSelect}
        ></ContactList>
      );
    }
  };
  const DisplayComponent = () => {
    if (activeId) {
      if (activeId === "newFrend") {
        return <NewFrend></NewFrend>;
      } else if (activeId === "myGroup") {
        return <MyGroup></MyGroup>;
      } else if (activeId === "blacklist") {
        return <Blacklist></Blacklist>;
      } else {
        return <MyFrend frendId={activeId}></MyFrend>;
      }
    } else {
      return <Empty imageStyle={{ height: "100vh" }} />;
    }
  };
  return (
    <div className="contacts">
      <div className="contacts--left">
        <Search
          placeholder="搜索联系人/聊天记录"
          showAdd={true}
          onChange={handleChange}
          // onAdd={handleCreateGroup}
        ></Search>
        <div className="list">
          <ListComponents></ListComponents>
        </div>
      </div>
      <div className="contacts--right">
        <DisplayComponent></DisplayComponent>
      </div>
    </div>
  );
};

export default contacts;
